<template>
	<view>
		<view class="tb_top">
			<h2>轨道交通3号线一期工程——3月</h2>
			<p>21831<span>结算总投资（万元）</span></p>
			<p>51831<span>本年度计划投资（万元）</span></p>
		</view>
		<view class="tb_bottom">
			<form @submit="formSubmit" @reset="formReset">
				<view class="r a">
					<h3>本月完成投资</h3>
					<input class="uni-input" focus placeholder="请输入" />
					<span>万</span>
				</view>
				<view class="r a">
					<h3>本年累计投资</h3>
					<input class="uni-input" focus placeholder="请输入" />
					<span>万</span>
				</view>
				<view class="r">
					<h3>是否开工</h3>
					<picker :range="sfkgData" @change="sfkgChange">
						{{ sfkgData[sfkgIndex] }}
					</picker>
					<span></span>
				</view>
				<view class="r">
					<h3>来开工项目前期进展</h3>
					<picker :range="qqjzData" @change="qqjzChange">
						{{ qqjzData[qqjzIndex] }}
					</picker>
					<span></span>
				</view>
				<view class="r">
					<h3>是否竣工</h3>
					<picker :range="sfkgData" @change="sfkgChange">
						{{ sfkgData[sfkgIndex] }}
					</picker>
					<span></span>
				</view>
				<view class="r">
					<h3>是否存在问题</h3>
					<picker :range="sfczwtData" @change="sfczwtChange">
						{{ sfczwtData[sfczwtIndex] }}
					</picker>
					<span></span>
				</view>
				<view class="sfczwtShow" v-if="sfczwtShow">
					<view class="r clear">
						<h3>问题类型<i>*</i></h3>
						 <checkbox-group>
							<label>
								<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />用地报批
							</label>
							<label>
								<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />手续办理
							</label>
						</checkbox-group>
					</view>
					<view class="r">
						<h3>责任单位<i>*</i></h3>
						<picker :range="sfczwtData" @change="sfczwtChange">
							{{ sfczwtData[sfczwtIndex] }}
						</picker>
						<span></span>
					</view>
					<view class="r">
						<h3>办理时段<i>*</i></h3>
						<picker :range="sfczwtData" @change="sfczwtChange">
							{{ sfczwtData[sfczwtIndex] }}
						</picker>
						<span></span>
					</view>
					<view class="r clear last">
						<h3>问题描述<i>*</i></h3>
						<textarea placeholder="请输入你的问题…" />
					</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit" type="primary">保存</button>
					<button type="default" form-type="reset">取消</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sfkgData:['是','否'],
				sfkgIndex:0,
				sfczwtData:['是','否'],
				sfczwtIndex:1,
				sfczwtShow:false,
				qqjzData:['进展1','进展2','进展3','进展4'],
				qqjzIndex:0,
			}
		},
		methods: {
			sfkgChange(e){
				this.sfkgIndex = e.detail.value;
			},
			sfczwtChange(e){
				this.sfczwtIndex = e.detail.value;
				if(this.qqjzIndex == 0){
					this.sfczwtShow = true
				}else{
					this.sfczwtShow = false
				}
			},
			qqjzChange(e){
				this.qqjzIndex = e.detail.value;
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e) {
				console.log('清空数据')
			}
			
		}
	}
</script>

<style scoped>
	@import url("ydtb.css");
</style>

